<template>
  <div> 
    <HeaderNav :title="title" :showBack='true' :url='url' />
    <img src="../../assets/img/upgrade_img.jpg" class="top_img"/>
    
    <div class="userinfo_container" v-if="!memberId">
      <img :src="userInfo.httpAvatar" class="userinfo_img"/>
      <div class="userinfo_right">
        <div class="userinfo_name">{{$t('m.msg.GRADE_NAME')}}：{{userInfo.name}}</div>
        <div>{{$t('m.msg.MONEY_HAVE')}}: {{formatMoney(userInfo.gold)}}{{$t('m.msg.DIAMOND')}}
          <!-- <span v-if="userInfo.grade == 'blueDiamond'">{{$t('m.msg.GRADE_BLUEDIAMOND')}}&nbsp;&nbsp;{{$t('m.msg.GRADE_TIME')}}{{userInfo.vipDate}}</span>
          <span v-else-if="userInfo.grade == 'anCrown'">{{$t('m.msg.GRADE_AMCROWN')}}&nbsp;&nbsp;{{$t('m.msg.GRADE_TIME')}}{{userInfo.vipDate}}</span>
          <span v-else>{{$t('m.msg.GRADE_USER')}}</span> -->
          <!-- <div>期限{{userInfo.vipDate}}</div>
          <div v-if="userInfo.grade == 'blueDiamond' || userInfo.grade == 'anCrown'">期限{{userInfo.vipDate}}</div> -->
        </div>
      </div>
    </div>

    <div class="selectTitle">{{$t('m.msg.PAY_SEL')}}</div>

    <div class="select_container" :key="index" v-for="(item,index) in vipPrice">
       <div class="select_cricle"  @click='selectVip(index)' :style="`${vipSel == index ? 'background-color: #91A121' : ''}`"></div>
      <div class="select_box"  @click='selectVip(index)' :style="`${vipSel == index ? 'border-color: #91A121;color: #91A121' : ''}`">
        <div class="select_item">
          <van-icon name="bulb-o" info="diamond" :style="`${vipSel == index ? 'color: #91A121': ''} `" size="30px" />
          <div>{{$t('m.msg.DIAMOND')}}</div>
        </div>
        <div>
           {{item.gold}}{{$t('m.msg.DIAMOND')}}/{{item.price}}$
          <!-- <div style="display: flex;margin-left: -4vw;">
            ￥<input v-model="money" style="width: 60px;" placeholder="请输入用户名" />
          </div>
          <div class='select_month'>
            <div class='select_add' @click.stop='addMonth()'>+</div>
            <div class='select_add' @click.stop='subtractMonth()'>-</div>
          </div> -->
        </div>
      </div>
    </div>

    <div class="selectTitle">{{$t('m.msg.PAY_SEL2')}}</div>

    <div class="select_container">
       <div class="select_cricle"  @click='selectVip()' :style="`${vipSel == vipPrice.length ? 'background-color: #91A121' : ''}`"></div>
      <div class="select_box"  @click='selectVip()' :style="`${vipSel == vipPrice.length ? 'border-color: #91A121;color: #91A121' : ''}`">
        <div class="select_item">
          <van-icon name="bulb-o" info="diamond" :style="`${vipSel == vipPrice.length ? 'color: #91A121': ''} `" size="30px" />
          <div>{{$t('m.msg.DIAMOND')}}</div>
        </div>
        <div>
           <!-- {{item.gold}}{{$t('m.msg.DIAMOND')}}/{{item.price}}￥ -->
          <div style="display: flex;margin-left: -4vw;">
            $<input v-model="money" style="width: 60px;" :placeholder="$t('m.msg.MSG50')" />
          </div>
          <div class='select_month'>
            <div class='select_add' @click.stop='addMonth()'>+</div>
            <div class='select_add' @click.stop='subtractMonth()'>-</div>
          </div>
        </div>
      </div>
    </div>
    <div class='btn' @click='pay'>{{$t('m.msg.PAY_BTN2')}}</div>
  </div>
</template>

<script>
import {
    Toast,
    Icon,
    Field
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {setUser, getUser} from '@/api/session';
import {postQuery2,postQuery, getQuery, formatMoney} from '@/api/query';
export default {
  name: 'paymoney',
  components: {
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [Field.name]: Field,
    HeaderNav
  },
  data(){
    return {
      vipPrice: [],
      vipSel: 0,//当前选择的vip
      money: 1,
      paySel: 0,
      memberId: null,
      url: '/mine',
      title: this.$i18n.t('m.headernav.PAY_MONEY')
      // vipInit: {}//储存初始值
    }
  },
  methods: {
    formatMoney(money){
      return formatMoney(money);
    },
    //支付
    pay(){
     
      // that.paySel
      let that = this;
      that.$toast.loading({
        duration: 0,
        forbidClick: true,
        mask: true,
        message: "加载中..."
      });
      let data = {};
      //判断是否是套餐
      if(that.vipSel == that.vipPrice.length){
        data.gold = that.money
      }else{
        data.goldSetMealId = that.vipPrice[that.vipSel].id
      }
      if(that.memberId){
        data.memberId = that.memberId
      }
      postQuery2('/member/recharge/gold', data)
          .then (res => {
            that.$toast.clear(); // 关闭加载
            if(res.code == 200){
              console.log(res);
              if(res.data.isInside){
                that.$toast.success(that.$i18n.t('m.msg.MSG44'));
              }else{
                window.location.href = res.data.url;
              }
            }else{
              that.$toast.fail(res.msg);
            }
        })
    },
    //选择月份
    addMonth(){
      let that = this;
      that.money ++;
    },
    subtractMonth(index){
      let that = this;
      if(that.money > 1){
        that.money --;
      }
    },
    //选择vip
    selectVip(val){
      let that = this;
      if(val > -1){
        that.vipSel = val;
      }else{
        that.vipSel = that.vipPrice.length;
      }
    },
    //选择支付方式
    selectPay(val){
      this.paySel = val;
    },
    //获取会员价格
    getVipData(){
      let that = this;
      getQuery('/member/recharge/gold/setMeal')
          .then (res => {
            if(res.code == 200){
              console.log(res);
              that.vipPrice = res.data;
            }else{
              that.$toast.fail(res.msg);
            }
        })
    }
  },
  created(){
    let that = this;
    //为他人重值
    that.memberId = that.$route.query.memberId;
    if(that.memberId){
      that.title = this.$i18n.t('m.headernav.PAY_MONEY2')
      that.url = `/userInfo?type=2&id=${+that.memberId}`
    }else{
      that.title = this.$i18n.t('m.headernav.PAY_MONEY')
      that.url = '/mine'
    }
    //支付回调
    let type = that.$route.query.type;
    if(type){
      if(type == 1 && that.memberId){
        that.$toast.success(that.$i18n.t('m.msg.PAY_SUCCESS'));
        // setUser(null, 3); //支付回调完成更新缓存数据
        getQuery('/member/info')
        .then (res => {
            if(res.code == 200){
                console.log('user:',res)
                let user = res.data;
                that.userInfo = user;
                user.cookie = getUser().cookie;
                VueCookies.set(USER_KEY, user);
            }else{
                that.$toast.fail(res.msg);
                that.userInfo = getUser();
            }
        })
      }else{
        that.$toast.fail(that.$i18n.t('m.msg.PAY_FAIL'));
        that.userInfo = getUser();
      }
    }else{
      that.userInfo = getUser();
    }
    
    that.getVipData();
  }
}
</script>
<style scoped>
  .top_img{
    height: 30vh;
    width: 100vw;
    margin-top: 20px;
  }

  .userinfo_container{
    background-color: white;
    width: 100vw;
    display: flex;
    font-size: 18px;
    color: #a1a1a1;
    /* border-bottom: 20px #F5F5F5 solid; */
    padding: 30px 0px;
  }

  .userinfo_img{
    margin-left: 20px;
    height: 100px;
    width: 100px;
  }

  .userinfo_right{
    margin-left: 30px;
  }
  .userinfo_name{
    margin-top: 10px;
    height: 60px;
    font-size: 28px;
  }

  .selectTitle{
    height: 80px;
    line-height: 80px;
    width: 94vw;
    background-color: #F5F5F5;
    font-size: 28px;
    padding-left: 6vw;
    color: #946694;
  }

  .select_container{
    height: 12vh;
    display: flex;
    align-items: center;
    padding-top: 30px;
    background-color: white;

  }
  
  .select_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 77vw;
    height: 150px;
    border-radius: 10px;
    border: 3px #a1a1a1 solid;
    padding: 0 3vw 0 4vw;
    margin-left: 4vw;
    border-color: #a1a1a1;
    color: #a1a1a1;
  }

  .select_item{
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    
  }

  .select_cricle{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 3px #a1a1a1 solid;
    position: relative;
    left: 6.5vw;
    background-color: #a1a1a1;
  }

  .select_month{
    display: flex;
    position: relative;
    top: 20px;
    justify-content: space-between;
    width: 110px;
  }

  .select_add{
    width: 40px;
    height: 20px;
    font-size: 10px;
    border-radius: 3px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 100vw;
    font-size: 27px;
    background-color: #01D2FF;
    color: white;

    /* position: fixed;
    bottom: 2vh; */
    border-top: 5vh white solid;
  }

  .pay{
    width: 140px;
    height: 60px;
    border-radius: 6px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1a1;
  }

  .pay_container{
    display: flex;
    background-color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60vw;
    padding: 20px 33vw 2vh 7vw;
    
  }

</style>
